<template>
  <div class="page-content">
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/" class="mr-2">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">诉状模板下载</h1>
      </div>
    </header>

    <main class="container mx-auto px-4 mt-4">
      <!-- 搜索栏 -->
      <div class="flex gap-2 mb-4">
        <div class="relative flex-1">
          <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
          <input
            v-model="searchKeyword"
            type="text"
            placeholder="请输入关键字搜索"
            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
          />
        </div>
        <button
          class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium"
        >
          查询
        </button>
      </div>

      <!-- 分类列表 -->
      <div class="space-y-2">
        <!-- 民商事分类 -->
        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
          <div
            @click="toggleCategory('civil')"
            class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50"
          >
            <div class="flex items-center">
              <i class="fas fa-balance-scale text-blue-600 mr-3"></i>
              <span class="font-medium">民商事</span>
            </div>
            <i
              :class="[
                'fas transition-transform',
                expandedCategories.civil ? 'fa-chevron-up' : 'fa-chevron-down',
              ]"
            ></i>
          </div>

          <div v-if="expandedCategories.civil" class="border-t border-gray-100">
            <div class="p-4 space-y-2">
              <div class="text-sm text-gray-600">暂无文档</div>
            </div>
          </div>
        </div>

        <!-- 执行分类 -->
        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
          <div
            @click="toggleCategory('execution')"
            class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50"
          >
            <div class="flex items-center">
              <i class="fas fa-wrench text-blue-600 mr-3"></i>
              <span class="font-medium">执行</span>
            </div>
            <i
              :class="[
                'fas transition-transform',
                expandedCategories.execution
                  ? 'fa-chevron-up'
                  : 'fa-chevron-down',
              ]"
            ></i>
          </div>

          <div
            v-if="expandedCategories.execution"
            class="border-t border-gray-100"
          >
            <!-- 强制执行申请书子分类 -->
            <div class="border-b border-gray-100">
              <div
                @click="toggleSubCategory('enforcement')"
                class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50"
              >
                <div class="flex items-center">
                  <i class="fas fa-list text-gray-500 mr-3"></i>
                  <span class="text-sm">强制执行申请书</span>
                </div>
                <i
                  :class="[
                    'fas transition-transform text-sm',
                    expandedSubCategories.enforcement
                      ? 'fa-chevron-up'
                      : 'fa-chevron-down',
                  ]"
                ></i>
              </div>

              <div
                v-if="expandedSubCategories.enforcement"
                class="bg-gray-50 p-4 space-y-3"
              >
                <!-- 文档列表 -->
                <div
                  v-for="doc in enforcementDocs"
                  :key="doc.name"
                  @click="showDocumentDetail(doc)"
                  class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200 cursor-pointer hover:shadow-sm transition"
                >
                  <div class="flex items-center">
                    <div class="relative mr-3">
                      <div
                        class="w-10 h-12 bg-blue-100 rounded flex items-center justify-center"
                      >
                        <span class="text-blue-600 font-bold text-sm">W</span>
                      </div>
                    </div>
                    <div>
                      <div class="font-medium text-sm">{{ doc.name }}</div>
                      <div class="text-xs text-gray-500">{{ doc.size }}</div>
                    </div>
                  </div>
                  <div class="flex items-center text-xs text-gray-500">
                    <i class="fas fa-download mr-1"></i>
                    <span>{{ doc.downloads }}次</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 其他子分类 -->
            <div
              v-for="subCategory in otherExecutionCategories"
              :key="subCategory.name"
              class="border-b border-gray-100 last:border-b-0"
            >
              <div
                @click="toggleSubCategory(subCategory.key)"
                class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50"
              >
                <div class="flex items-center">
                  <i class="fas fa-list text-gray-500 mr-3"></i>
                  <span class="text-sm">{{ subCategory.name }}</span>
                </div>
                <i
                  :class="[
                    'fas transition-transform text-sm',
                    expandedSubCategories[subCategory.key]
                      ? 'fa-chevron-up'
                      : 'fa-chevron-down',
                  ]"
                ></i>
              </div>

              <div
                v-if="expandedSubCategories[subCategory.key]"
                class="bg-gray-50 p-4"
              >
                <div class="text-sm text-gray-600">暂无文档</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 文档详情弹窗 -->
    <div
      v-if="showDetail"
      class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
    >
      <div
        class="bg-white rounded-xl max-w-md w-full max-h-[80vh] overflow-y-auto"
      >
        <div class="p-6">
          <div class="flex items-center mb-4">
            <div
              class="w-12 h-12 bg-blue-100 rounded flex items-center justify-center mr-3"
            >
              <span class="text-blue-600 font-bold">W</span>
            </div>
            <div>
              <h3 class="font-medium">{{ selectedDocument.name }}</h3>
              <p class="text-sm text-gray-500">{{ selectedDocument.size }}</p>
            </div>
          </div>

          <div class="bg-gray-50 p-4 rounded-lg mb-4">
            <p class="text-sm text-gray-800">
              本模板根据相关法律法规制定，包含完整的申请要素和格式要求，适用于强制执行申请案件。
            </p>
          </div>

          <div class="flex justify-between text-sm mb-4">
            <div>
              <p class="text-gray-500">文件大小</p>
              <p class="font-medium">{{ selectedDocument.size }}</p>
            </div>
            <div>
              <p class="text-gray-500">下载次数</p>
              <p class="font-medium">{{ selectedDocument.downloads }} 次</p>
            </div>
            <div>
              <p class="text-gray-500">更新日期</p>
              <p class="font-medium">2023-12-01</p>
            </div>
          </div>

          <button
            @click="downloadDocument"
            class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center mb-4"
          >
            <i class="fas fa-download mr-2"></i>
            <span>下载文档</span>
          </button>

          <div class="border-t pt-4">
            <h4 class="font-medium mb-2">文档预览</h4>
            <div class="bg-gray-50 p-3 rounded-lg text-sm">
              <p class="font-medium mb-1">强制执行申请书</p>
              <p class="text-gray-800 mb-1">
                申请人：姓名，性别，民族，出生日期，身份证号，住址，联系电话
              </p>
              <p class="text-gray-800 mb-1">
                被申请人：姓名，性别，民族，出生日期，身份证号，住址，联系电话
              </p>

              <p class="font-medium mt-3 mb-1">申请事项：</p>
              <p class="text-gray-800 mb-1">
                请求人民法院依法强制执行被申请人履行生效法律文书确定的义务。
              </p>

              <p class="font-medium mt-3 mb-1">事实与理由：</p>
              <p class="text-gray-800">
                申请人诉被申请人××纠纷一案，业经贵院审理终结，并作出（××）××民初字第××号民事判决书...
              </p>
            </div>
          </div>
        </div>

        <div class="border-t p-4">
          <button
            @click="showDetail = false"
            class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-lg"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from "vue";
import { useRouter } from "vue-router";

export default {
  name: "Templates",
  setup() {
    const router = useRouter();
    const searchKeyword = ref("");
    const showDetail = ref(false);
    const selectedDocument = ref({});

    // 分类展开状态
    const expandedCategories = reactive({
      civil: false,
      execution: true,
    });

    // 子分类展开状态
    const expandedSubCategories = reactive({
      enforcement: true,
      temporary: false,
      distribution: false,
      guarantee: false,
    });

    // 强制执行申请书文档列表
    const enforcementDocs = reactive([
      {
        name: "强制执行申请书.docx",
        size: "38.17 KB",
        downloads: "2858次",
      },
      {
        name: "强制执行申请书实例.docx",
        size: "351.00 KB",
        downloads: "601次",
      },
    ]);

    // 其他执行子分类
    const otherExecutionCategories = reactive([
      { name: "暂时解除乘坐飞机、高铁限制措施申请书", key: "temporary" },
      { name: "参与分配申请书", key: "distribution" },
      { name: "执行担保申请书", key: "guarantee" },
    ]);

    const toggleCategory = (category) => {
      expandedCategories[category] = !expandedCategories[category];
    };

    const toggleSubCategory = (subCategory) => {
      expandedSubCategories[subCategory] = !expandedSubCategories[subCategory];
    };

    const showDocumentDetail = (document) => {
      // 使用 Vue Router 进行跳转
      router.push({
        name: 'TemplateDetail',
        params: { name: document.name }
      });
    };

    const downloadDocument = () => {
      console.log("下载文档:", selectedDocument.value.name);
      // 这里添加下载逻辑
      showDetail.value = false;
    };

    return {
      searchKeyword,
      showDetail,
      selectedDocument,
      expandedCategories,
      expandedSubCategories,
      enforcementDocs,
      otherExecutionCategories,
      toggleCategory,
      toggleSubCategory,
      showDocumentDetail,
      downloadDocument,
    };
  },
};
</script>

<style scoped>
.page-content {
  min-height: 100vh;
  background-color: #f5f5f5;
}
</style>
